<template>
  <div class="home">
    <div class="content">
      <!-- 头部 -->
      <div class="header">
        <div class="text">外卖</div>
        <div class="location">
          <van-icon name="location" color="#333" />
          <span @click="goMine">{{ nickname }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 主体 -->
      <div class="main">
        <div class="main-bg">
          <div class="search">
            <input type="text" name="" id="" />
            <span class="text">搜索</span>
          </div>
          <div class="sort">
            <div class="big-sort">
              <div v-for="(item, index) in big_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                <span>{{ item.name }}</span>
              </div>
            </div>
            <div class="small-sort">
              <div v-for="(item, index) in small_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="tab">
            <van-tabs v-model:active="active" color="red">
              <van-tab
                v-for="(item, index) in centent_nav_list"
                :key="index"
                :title="item.tab"
              >
                <tab-item :tabItem="item.data"></tab-item>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import tabItem from "./components/tabItem.vue";
import router from "@/router";
// import { getHomeData } from "@/api/api";
const { big_sort, small_sort, centent_nav_list } = toRefs(
  reactive({
    big_sort: [
      {
        name: "美食",
        icon: "icon-meishi",
      },
      {
        name: "甜点饮品",
        icon: "icon-tiandianmianbaodangaoshuiguotiandian",
      },
      {
        name: "超市便利",
        icon: "icon-chaoshigouwu",
      },
      {
        name: "生鲜果蔬",
        icon: "icon-shengxian-putao",
      },
      {
        name: "买药",
        icon: "icon-shipinyaopin",
      },
    ],
    small_sort: [
      {
        name: "午餐",
        icon: "icon-yingyangwucanjihua",
      },
      {
        name: "买酒",
        icon: "icon-app_scenes_cocktail_",
      },
      {
        name: "新鲜水果",
        icon: "icon-xinxianguoshu_xinxianshuiguopingguo",
      },
      {
        name: "汉堡披萨",
        icon: "icon-hanbaopisa",
      },
      {
        name: "休闲鞋",
        icon: "icon-icon_cloths-",
      },
      {
        name: "夜宵",
        icon: "icon-yexiao",
      },
      {
        name: "吐司",
        icon: "icon-tusi",
      },
      {
        name: "跑腿",
        icon: "icon-paotuiAPP",
      },
      {
        name: "美人佳丽",
        icon: "icon-face",
      },
      {
        name: "全部分类",
        icon: "icon-classquanbufenlei",
      },
    ],
    centent_nav_list: [
      {
        tab: "天天神券",
        data: [
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
          {
            pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
            title: "隆江猪脚饭",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
        ],
      },
      {
        tab: "减配送费",
        data: [
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
        ],
      },
      {
        tab: "点评高分",
        data: [
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
        ],
      },
      {
        tab: "会员满减",
        data: [
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
          {
            pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
            title: "酸菜鱼",
            sales: "2888",
            price: "20",
            label: ["门店上新", "很下饭"],
          },
        ],
      },
    ],
  })
);
const active = ref(0);
const nickname = ref("json");
const initNickName = () => {
  if (localStorage.userinfo) {
    let userinfo = JSON.parse(localStorage.userinfo);
    nickname.value = userinfo.name;
  }
};
const goMine = () => {
  router.push("/mine");
};
// const getData = () => {
//   getHomeData().then((res) => {
//     console.log(res);
//     big_sort.value = res.big_sort;
//     small_sort.value = res.small_sort;
//     centent_nav_list.value = res.centent_nav_list;
//   });
// };

onMounted(() => {
  initNickName();
  // getData();
});
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
    .header {
      padding: 20px 20px 40px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to bottom, #ffc400, #fff);
      .text {
        font-size: 16px;
        font-weight: 600;
      }
      .location {
        font-size: 14px;
        span {
          padding: 0 5px;
        }
      }
    }
    .main {
      margin-top: -20px;
      .main-bg {
        padding: 20px 10px 0 10px;
        background: linear-gradient(#fff, #f5f5f5);
        border-radius: 30px 30px 0 0;
        .search {
          position: relative;
          // overflow: hidden;
          input {
            width: 100%;
            height: 35px;
            border-radius: 20px;
            border: 1px solid #ffc400;
            box-sizing: border-box;
          }
          .text {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #ffc400;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            border-radius: 20px;
            padding: 0 12px;
          }
        }
        .sort {
          padding: 20px 10px 10px 10px;
          .big-sort {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            div {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              .icon {
                width: 40px;
                height: 40px;
              }
              span {
                font-size: 14px;
              }
            }
          }
          .small-sort {
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;
            div {
              width: 20%;
              display: flex;
              flex-direction: column;
              align-items: center;
              // margin-bottom: 10px;
              .icon {
                width: 20px;
                height: 20px;
                padding: 5px;
              }
              span {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
/deep/.van-tabs__wrap {
  border-radius: 10px;
  background-color: #fff;
}
</style>
